﻿<!DOCTYPE html>
<html>
<head>
  <title>会话</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="css/base.css" rel="stylesheet" media="screen">
  <link href="css/header.css" rel="stylesheet" media="screen">
  <link href="css/talks.css" rel="stylesheet" media="screen">
  <link href="css/skin.css" rel="stylesheet" media="screen">
</head>
<body>
  <div class="header">
    <div class="container">
      <a class="fn_left logo" href="http://www.025.com"  title="领爱网">领爱网</a>
      <ul class="nav  fn_left">
        <li class="">
          <a href="" class="active"><b class="group"></b>婚恋圈</a>
        </li>
        <li>
          <a href="" class=""><b class="view"></b>观 点</a>
        </li>
        <li>
          <a href="" class=""><b class="search"></b>搜 索</a>
        </li>
      </ul>
      <ul class="menu fn_right">
        <li>
          <a href="#" class="letter por" title="通知"><span class="unread"></span></a>
        </li>
        <li>
          <a href="#" class="notice por" title="私信"><span class="unread"></span></a>
          <div class="child fn_hide">
            <!-- 下拉提示 -->
            <h3>通知(2)</h3>
            <div class="letterbox">
              <a class="letterbox_list">
                <img class="mr12" width="44" height="55" src="img/v2/user/user_img.jpg" alt="用户名">
                <div class="fn_left w162">
                  <p class="lh22 por">
                    陈安妮
                    <span class="poa r0">发表动态</span>
                  </p>
                  <p class="ovfh h16 ">书承载着我们的喜怒哀乐，也将我们的精神提升到了……</p>
                  <p class="fz12col999">12-05 12:30</p>
                </div>
                 <img class="ml12" width="55" height="55" src="img/v2/me/fucker.gif" >
              </a>
              <a class="letterbox_list active">
                <img class="mr12" width="44" height="55" src="img/v2/user/user_img.jpg" alt="用户名">
                <div class="fn_left w162">
                  <p class="lh22 por">
                    陈安妮
                    <span class="poa r0">发表动态</span>
                  </p>
                  <p class="ovfh h16 ">书承载着我们的喜怒哀乐，也将我们的精神提升到了……</p>
                  <p class="fz12col999">12-05 12:30</p>
                </div>
                <p class="fn_left ml12 w55 h65 ovfh  fz12col999">hahahaha哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
              </a>
              <a class="letterbox_list">
                <img class="mr12" width="44" height="55" src="img/v2/user/user_img.jpg" alt="用户名">
                <div class="fn_left w162">
                  <p class="lh22 por">
                    陈安妮
                    <span class="poa r0">发表动态</span>
                  </p>
                  <p class="ovfh h16 ">书承载着我们的喜怒哀乐，也将我们的精神提升到了……</p>
                  <p class="fz12col999">12-05 12:30</p>
                </div>
                <img class="ml12" width="55" height="55" src="img/v2/me/fucker.gif" >
              </a>
            </div>
            <div class="crtrlbox">
              <a href="" class="ctrlbut fn_left"></a>
              <p class="tar">
                <a href="" class="leftbut">&lt;</a>
                <a href="" class="rightbut">&gt;</a>
              </p>
            </div>

            <b class="angle"><b class="angle2"></b></b> 
          </div>
        </li>
        <li>
          <a href="#" class="user">
            <img class="mr14" width="24" height="30" src="img/v2/user/user_img.jpg" alt="用户名">
            <span>时间抓不住我的hahahah?</span>
          </a>
          <div class="child child_w126 fn_hide">
            <!-- 下拉提示 -->
            <div class="uesrset">
              <p>
                <a class="uesrset_ioc1" href="">
                  <span></span>
                  个人主页
                </a>
              </p>
              <p>
                <a class="uesrset_ioc2" href="">
                  <span></span>
                  婚恋圈管理
                </a>
              </p>
              <p>
                <a class="uesrset_ioc3" href="">
                  <span></span>
                  设置中心
                </a>
              </p>
              <p>
                <a class="uesrset_ioc4" href="">
                  <span></span>
                  退出
                </a>
              </p>
            </div>
            <b class="angle"><b class="angle2"></b></b> 
          </div>
        </li>
      </ul>
    </div>
  </div>
  <!-- header over -->
  <div class="wrap">
    <div class="content">
      <div class="main">
        <div class="talk_list fn_left">
          <!-- 聊天列表 -->
          <div class="talk_list_lab">
            <div class="history">
              <a class="" href="" title="消息"></a>
            </div><span class="line"></span><div class="msg">
              <a class="active" href="" title="发信记录"></a>
            </div><span class="line"></span><div class="friends">
              <a class="" href="" title="好友列表"></a>
            </div>
          </div>

          <div class="talk_list_box fn_clear" style="height: 680px;">
            <ul class="talk_list_boxul " >
              <li class="history_li ">
                
                <div class="guestbox guestbox_active fn_clear">
                  <div class="guestimg">
                    <img src="img/v2/talks/miss_ico.png" width="43" height="51" alt="领爱小秘书(官方)">
                    <span class="new"></span>
                  </div>
                  <p class="name">领爱小秘书<img src="img/v2/talks/official.png" width="16" height="16" alt="(官方)"></p>
                  <p class="detail">风申请查看你的QQ <span class="stamp">20:13</span></p>
                </div>

                <div class="guestbox guestbox_active fn_clear">
                  <div class="guestimg">
                    <img src="img/v2/talks/msg_ico.png" width="43" height="51" alt="发信记录">
                    <span class="new"></span>
                  </div>
                  <p class="name">发信记录<img src="img/v2/talks/official.png" width="16" height="16" alt="(官方)"></p>
                  <p class="detail">发件箱<span class="stamp">20:13</span></p>
                  <span class="jump_msg jump_msg_active" ></span>
                </div>
                
                <div class="guestbox fn_clear">
                  <div class="guestimg havenew">
                    <img src="img/v2/user/user_img.jpg" width="43" height="51" alt="优雅的颓废">
                    <span class="new"></span>
                  </div>
                  <p class="name">优雅的颓废</p>
                  <p class="detail">风申请查看你的QQ <span class="stamp">20:13</span></p>
                </div>
                <div class="guestbox fn_clear">
                  <div class="guestimg havenew">
                    <img src="img/v2/user/user_img.jpg" width="43" height="51" alt="优雅的颓废">
                    <span class="new"></span>
                  </div>
                  <p class="name">优雅的颓废</p>
                  <p class="detail">风申请查看你的QQ <span class="stamp">20:13</span></p>
                </div>
                
                <div class="guestbox fn_clear">
                  <div class="guestimg ">
                    <img src="img/v2/user/user_img.jpg" width="43" height="51" alt="优雅的颓废">
                    <span class="new"></span>
                  </div>
                  <p class="name">优雅的颓废</p>
                  <p class="detail">风申请查看你的QQ <span class="stamp">20:13</span></p>
                </div>
                <div class="guestbox fn_clear">
                  <div class="guestimg havenew">
                    <img src="img/v2/user/user_img.jpg" width="43" height="51" alt="优雅的颓废">
                    <span class="new"></span>
                  </div>
                  <p class="name">优雅的颓废</p>
                  <p class="detail fn_hide">风申请查看你的QQ <span class="stamp">20:13</span></p>
                </div>
              </li>
              <li class="friends_li fn_hide">
                <div class="guestbox fn_clear">
                    <a class="db" href="" target="_blank">
                      <div class="guestimg">
                        <img src="img/v2/talks/all_ico.png" width="43" height="51" alt="全部联系人">
                      </div>
                      <p class="name name_all">全部联系人</p>
                      <span class="jump_all">&gt;</span>
                    </a>
                </div>
                <div class="guestbox_title">
                  ★ 星标朋友
                </div>
                <div class="guestbox fn_clear">
                  <div class="guestimg havenew">
                    <img src="img/v2/user/user_img.jpg" width="43" height="51" alt="优雅的颓废">
                    <span class="new"></span>
                  </div>
                  <p class="name">优雅的颓废</p>
                </div>
                <div class="guestbox fn_clear">
                  <div class="guestimg havenew">
                    <img src="img/v2/user/user_img.jpg" width="43" height="51" alt="优雅的颓废">
                    <span class="new"></span>
                  </div>
                  <p class="name">优雅的颓废</p>
                </div>
                <div class="guestbox_title">
                  我圈的人
                </div>
                <div class="guestbox fn_clear">
                  <div class="guestimg havenew">
                    <img src="img/v2/user/user_img.jpg" width="43" height="51" alt="优雅的颓废">
                    <span class="new"></span>
                  </div>
                  <p class="name">优雅的颓废</p>
                  <span class="add_mutual">互圈</span>       
                </div>
                <div class="guestbox fn_clear">
                  <div class="guestimg havenew">
                    <img src="img/v2/user/user_img.jpg" width="43" height="51" alt="优雅的颓废">
                    <span class="new"></span>
                  </div>
                  <p class="name">优雅的颓废</p>
                  <span class="add_mutual">互圈</span> 
                </div>
              </li>
            </ul>
            <!-- <a class="more" href="">点击显示更多</a> -->
          </div>

        </div>
        <div class="talk_site fn_left">
          <!-- 当前聊天点 -->
          <div class="talk_site_point " style="top:70px"><!-- 每次+70px --></div>
        </div>
        <div class="talk_box " >
          <!-- 聊天盒子 -->
          <div class="talk_box_title">
            <a href="" class="talk_box_set">...<!-- 关系设置 --></a>
            优雅的颓废
            <div class="talk_box_setmenu fn_hide">
              <!-- 关系设置菜单 -->
              <a href="">设为星标用户</a>
              <a href="">加入婚礼全</a>
              <a href="">拉黑</a>
              <a href="">举报</a>
            </div>
          </div>
          <div class="talk_box_scorll" style="height: 625px;" >
            <!-- 聊天盒子 talk_list_box 高度-55px -->
            <div class="talk_box_content" style="top:-1400px">
              <!-- 聊天内容 -->
              <div class="introduce">
                <!-- 用户介绍盒子 秘书无 -->
                <a href="">
                  <img src="img/v2/user/user_img.jpg" width="70" height="86" alt="优雅的颓废">
                  <p class="name">优雅的颓废</p>
                  <p>未婚，20岁</p>
                  <p>广东深圳</p>
                </a>
              </div>
              
              <div class="talks_item you">
                <div class="time">2013-12-28 7:21</div>
                <div class="talks_item_com">
                  <img src="img/v2/talks/miss_ico.png" width="43" height="51" alt="" class="avatar">
                  <div class="bubble bubble_miss">
                    <div class="bubble_com">
                      <div class="bubble_miss_box">
                        <h1>观点分享</h1>
                        <div class="question fn_clear">
                          <img src="img/v2/user/user_img.jpg" width="43" height="51" alt="优雅的颓废">
                          <p class="name">优雅的颓废</p>
                          <p>向你分享了专访</p>
                        </div>
                        <div class="answer">
                          <p>已过期</p>
                          
                        </div>        
                      </div>
                    </div>
                    <span class="bubble_new"></span>
                    <span class="length"></span>
                    <span class="bubble_cor"></span>
                  </div>
                </div>
              </div>
              <div class="talks_item you">
                <div class="time">2013-12-28 7:21</div>
                <div class="talks_item_com">
                  <img src="img/v2/talks/miss_ico.png" width="43" height="51" alt="" class="avatar">
                  <div class="bubble bubble_miss">
                    <div class="bubble_com">
                      <div class="bubble_miss_box">
                        <h1>观点分享</h1>
                        <div class="question fn_clear">
                          <img src="img/v2/user/user_img.jpg" width="43" height="51" alt="优雅的颓废">
                          <p class="name">优雅的颓废</p>
                          <p>向你分享了专访</p>
                        </div>
                        <div class="answer">
                          <p>你会等待那种只暧昧不承诺的人吗？</p>
                          <p class="tac"><a href="" target="_blank">立即填写</a></p>
                        </div>        
                      </div>
                    </div>
                    <span class="bubble_new"></span>
                    <span class="length"></span>
                    <span class="bubble_cor"></span>
                  </div>
                </div>
              </div>
              <div class="talks_item you">
                <div class="time">2013-12-28 7:21</div>
                <div class="talks_item_com">
                  <img src="img/v2/talks/miss_ico.png" width="43" height="51" alt="" class="avatar">
                  <div class="bubble bubble_miss">
                    <div class="bubble_com">
                      <div class="bubble_miss_box">
                        <h1>观点分享</h1>
                        <div class="question fn_clear">
                          <img src="img/v2/user/user_img.jpg" width="43" height="51" alt="优雅的颓废">
                          <p class="name">优雅的颓废</p>
                          <p>向你分享了专访</p>
                        </div>
                        <div class="answer">
                          <p>你会等待那种只暧昧不承诺的人吗？</p>
                          <p class="tac"><a href="" target="_blank">同意</a><a href="" target="_blank">拒绝</a></p>
                        </div>        
                      </div>
                    </div>
                    <span class="bubble_new"></span>
                    <span class="length"></span>
                    <span class="bubble_cor"></span>
                  </div>
                </div>
              </div>

              <div class="talks_item you">
                <div class="time">2013-12-28 7:21</div>
                <div class="talks_item_com">
                  <img src="img/v2/talks/miss_ico.png" width="43" height="51" alt="" class="avatar">
                  <div class="bubble bubble_site">
                    <div class="bubble_com">
                      <a href="" class="bubble_site_p" target="_blank">
                        <span>银汇大厦银汇大厦银汇大厦银汇大厦</span>
                      </a>
                    </div>
                    <span class="bubble_new"></span>
                    <span class="length"></span>
                    <span class="bubble_cor"></span>
                  </div>
                </div>
              </div>
              <div class="talks_item you">
                <div class="time">2013-12-28 7:21</div>
                <div class="talks_item_com">
                  <img src="img/v2/talks/miss_ico.png" width="43" height="51" alt="" class="avatar">
                  <div class="bubble bubble_photo">
                    <div class="bubble_com">
                      <img src="img/v2/user/user_img.jpg" alt="" class="bubble_photo_img">
                    </div>
                    <span class="bubble_new"></span>
                    <span class="length"></span>
                    <span class="bubble_cor"></span>
                  </div>
                </div>
              </div>

              <div class="talks_item you">
                <div class="time">2013-12-28 7:21</div>
                <div class="talks_item_com">
                  <img src="img/v2/talks/miss_ico.png" width="43" height="51" alt="" class="avatar">
                  <div class="bubble">
                    <div class="bubble_com">
                      <p class="bubble_text_p">aaaaaaaaaaaaaaa</p>
                    </div>
                    <span class="bubble_new"></span>
                    <span class="length"></span>
                    <span class="bubble_cor"></span>
                  </div>
                </div>
              </div>
              
              <div class="talks_item me">
                <div class="time">2013-12-28 7:25</div>
                <div class="talks_item_com">
                  <img src="img/v2/user/user_img.jpg" width="43" height="51" alt="" class="avatar">
                  <div class="bubble">
                    <div class="bubble_com">
                      <p class="bubble_text_p">你说啥?你说啥?你说啥?你说啥?你说啥?你说啥?你说啥?你说啥?你说啥?</p>
                    </div>
                    <span class="bubble_new"></span>
                    <span class="length"></span>
                    <span class="bubble_cor"></span>
                  </div>
                </div>
              </div>
              
              <div class="talks_item you">
                <div class="time">2013-12-28 7:25</div>
                <div class="talks_item_com">
                  <img src="img/v2/user/user_img.jpg" width="43" height="51" alt="" class="avatar">
                  <div class="bubble bubble_voice">
                    <div class="bubble_com">
                      <span class="bubble_voice_span"></span>
                    </div>
                    <span class="bubble_new"></span>
                    <span class="length">1"</span>
                    <span class="bubble_cor"></span>
                  </div>
                </div>
              </div>
              <div class="talks_item me">
                <div class="time">2013-12-28 7:25</div>
                <div class="talks_item_com">
                  <img src="img/v2/user/user_img.jpg" width="43" height="51" alt="" class="avatar">
                  <div class="bubble bubble_voice bubble_voice_play">
                    <div class="bubble_com" style="width: 144px">
                      <span class="bubble_voice_span"></span>
                    </div>
                    <span class="bubble_new"></span>
                    <span class="length">12"</span>
                    <span class="bubble_cor"></span>
                  </div>
                </div>
              </div>




            </div>
          </div>
          <div class="talk_box_sendbox">
            <a href="" class="talk_box_send" title="发送">发送</a>
            <a href="" class="talk_box_face"  title="选择表情"></a>
            <div class="talk_box_img"  title="选择照片"><input type="file" title="选择照片"></div>
            <textarea ></textarea>
          </div>
        </div>      
      </div>
      <!-- main over -->
    </div>
    <!-- content over -->
    <div class="footer_push footer">
      <!-- 页脚占位符 -->
    </div>
  </div>
  <!-- footer -->
  <div class="footer">
    <p><a target="_blank" href="http://www.duoyi.com/">广州多益网络科技有限公司</a></p>
    <p><a target="_blank" href="http://www.miitbeian.gov.cn/state/outPortal/loginPortal.action">ICP粤B2-20060723-4</a></p>
  </div>
</body>
</html>